<template>
	<div>
		<div class="tree-title" v-if="treeTitle">{{ treeTitle }}</div>
		<el-tree
			ref="zhytree"
			:data="data"
			:props="defaultProps"
			@check-change="checkChange"
			v-bind="$attrs"
			@node-click="handleNodeClick"
			@check="currentChange"
		></el-tree>
	</div>
</template>

<script setup lang="ts">
import { DefaultProps } from '@/components/ZhyTree/interface';
import { ref } from 'vue';
interface TreeArr {
	menuId?: number;
	label?: string;
	children?: Tree[];
}
interface Tree {
	data: Array<TreeArr>;
	defaultProps?: DefaultProps;
	getCheckType?: string; // 获取复选框选中后返回的类型 1为返回节点数组，2返回节点key数组
	treeTitle?: string | boolean; // 是否有标题
}

// 获取ref值
const zhytree = ref();

// 设置默认值
const props = withDefaults(defineProps<Tree>(), {
	getCheckType: '1'
});

const emits = defineEmits(['nodeClick', 'checkChange', 'currentChange']);

// 当前节点点击触发
const handleNodeClick = (node: any) => {
	emits('nodeClick', node);
};

// 当复选框被点击的时候触发
const checkChange = (node: any) => {
	emits('checkChange', node);
};

// 点击节点复选框之后触发，返回节点选中的数组
const currentChange = () => {
	const checkedNodes = zhytree.value.getCheckedNodes().concat(zhytree.value.getHalfCheckedNodes());
	const data: any[] = props.getCheckType === '1' ? checkedNodes : zhytree.value.getCheckedKeys();
	emits('currentChange', data);
};
</script>

<style scoped></style>
